<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<link type="text/css" rel="Stylesheet"
		href="../../css/jquery-ui-1.8.20.custom.css" />

	<link type="text/css" rel="Stylesheet" href="../../css/style_coopac.css" />
	
	<h:outputScript library="primefaces" name="jquery/jquery.js" />
	<script src="../../js/jquery-ui-1.8.20.custom.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/jquery.validate.js" type="text/javascript"></script>
	 <script  language="javascript" type="text/javascript">

		 $(document).ready(function(){
			$("#form").validate({               
             rules:{
	                  "form:apPatN":{
	                        required:true,
	                        minlength:3
	                   }
	                },
	                 messages:{
	                	"form:apPatN":{
	                        required:"",
	                        minlength:""
	                   }
	                 }
	            });
		});

	 
		//limpiar formulario
	 	function resetForm($form) {
		   $form.find("input[name='form:numDocN']:text,input[name='form:apePatN']:text").val('');
		   $form.find("input[name='form:apeMatN']:text,input[name='form:nomN']:text").val('');	
		   $form.find("input[name='form:numDocN2']:text,input[name='form:numtelfN']:text").val('');	
		   $form.find("input[name='form:numAnxN']:text,input[name='form:numEmailN']:text").val('');	
		   $form.find("input[name='form:numPagwebN']:text,input[name='form:zonaN']:text").val('');	
		   $form.find("input[name='form:viaN']:text,input[name='form:numDirN']:text").val('');	
		   $form.find("input[name='form:depDirN']:text,input[name='form:inDirN']:text").val('');	
		   $form.find("input[name='form:manDirN']:text,input[name='form:lotDirN']:text").val('');	
		   $form.find("input[name='form:kilDirN']:text,input[name='form:refDirN']:text").val('');	
		}	
		
	 	$.validator.setDefaults({
	        highlight: function(input) {
	                $(input).addClass("ui-state-error");
	        },
	        unhighlight: function(input) {
	                $(input).removeClass("ui-state-error");
	        },
	        invalidHandler: function(form, validator) {
	            var errors = validator.numberOfInvalids();
	            if (errors) {
	              var message = errors == 1
	                ? 'Hay 1 campo obligatorio vacio. Por favor llenarlo.'
	                : 'Hay ' + errors + ' campos obligatorios vacios. Por favor llenarlos.';
	              $("div.error span").html(message);
	              $("div.error").show();
	               $('#popup_error').dialog('open');
	            } else {
	                $("div.error").hide();
	            }
	        }
	    });
	 		
		$(function(){

			//limpiar formulario			 style="display:none;"
			$(".clear").click(function(){
				resetForm($('#form'));
				return false;
			});

			
			$('.boton').click(function(){
				
			//	alert("No hay datos para buscar");
			});		

			$(".focus").focus(function(){
				$var = $('.focus').val();
				if($val='2'){
					 alert("hola");
				}else{
					alert("jdjdj")
				}
				
			});	

			$('#popup_error').dialog({
                autoOpen:false	                         
            });
		}); 

		
	 </script>
	 
	
</h:head>

<h:body>
	<div id="contenedor">
		<div id="headerPlataforma"></div>

		<div id="menu">
			<ui:include src="../00_genericos/menu.xhtml"></ui:include>
		</div>

		<div id="formularios">
			<h:form id="form" prependId="true">
				<div id="cuerpo">
					<input type="submit" value="submit" />
					<p:panel header="Registro de Solicitud de Socio - Persona" style="font-size:20px; height:50px;">
					</p:panel>
					<p:panel header="Buscar Persona" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Buscar por.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="DNI" itemValue="1" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Criterio:</label>
							</div>
							<div class="field">
								<p:inputText  value="#{solicPersona.numdocumentoPersonaN}"  styleClass="numDocN"  id="numDocN" 
									style="width:157px" />
							</div>
							<div class="buttonSearch">
								<p:commandButton actionListener="#{solicPersona.buscarByNumDocumento}" styleClass="boton" 
								update=":form"  icon="ui-icon-search" ></p:commandButton>
							</div>
							<p:inputText value="#{solicPersona.documentoPersonaN.numero}" styleClass="focus"></p:inputText>
						</div>
					</p:panel>
					<p:panel header="Datos Persona Básicos II" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Ape.Paterno:</label>
							</div>
							<div class="field">
								<p:inputText id="apePatN"
									value="#{solicPersona.personaN.apellidoPaternoRazonSocial}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Ape.Materno:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.apellidoMaterno}"  id="apeMatN" 
									style="width:453px" />
								<p:watermark for="apeMatN" value="ingrese tu apellido"></p:watermark>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Nombres:</label>
							</div>
							<div class="field">
								<p:inputText id="nomN"
									value="#{solicPersona.personaN.nombrePersonaNombreComercial}"
									style="width:453px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Doc.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoDocumentoN.idTipoMaestro}"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipodocumento}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.documentoPersonaN.numero}" id="numDocN2"
									style="width:157px" />
							</div>
						</div>
						
						<div class="rowForm">
							<div class="label">
								<label>Fch.Nacimiento:</label>
							</div>
							<div class="calendar">
								<p:calendar></p:calendar>
							</div>
							<div class="label">
								<label>Sexo:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.personaN.sexo}" style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItem itemValue="1" itemLabel="Hombre" />
									<f:selectItem itemValue="0" itemLabel="Mujer" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Estado Civil:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoEstadoCivilN.idTipoMaestro}" style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaEstadoCivil}" />
								</p:selectOneMenu>
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Telef:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoTelefonoN.idTipoMaestro}"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipotelefono}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.telefonoPersonaN.numero}" id="numtelfN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Anexo:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.telefonoPersonaN.anexo}" id="numAnxN"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Email:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.email}" id="numEmailN"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Página Web:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.paginaWeb}" id="numPagwebN"
									style="width:453px" />
							</div>
						</div>
					</p:panel>




					<p:panel header="Datos Domiciliarios" toggleable="true">
						
						
						
						<div class="rowForm">
							<div class="label">
								<label>Departamento:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDepartamento"
									value="#{ubigeo.idDepartamento}" style="width:160px">
									<f:selectItem itemLabel="Dpto." />
									<f:selectItems value="#{ubigeo.listaDepartamento}" />
									<p:ajax update="selectProvincia, selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Provincia:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectProvincia"
									value="#{ubigeo.idProvincia}" style="width:160px">
									<f:selectItem itemLabel="Provincia" />
									<f:selectItems value="#{ubigeo.listaProvincia}" />
									<p:ajax update="selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Distrito:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDistrito"
									value="#{ubigeo.idDistrito}" style="width:160px">
									<f:selectItem itemLabel="Distrito" />
									<f:selectItems value="#{ubigeo.listaDistrito}" />
									<p:ajax update="selectDistritoDummy"></p:ajax>
								</p:selectOneMenu>
								<p:selectOneMenu id="selectDistritoDummy"
									value="#{solicPersona.distritoN.idUbigeo}" style="width:160px; display:none;">
									   <f:selectItem itemLabel="Dummy" itemValue="#{ubigeo.idDistrito}" />
							   </p:selectOneMenu>
							</div>
						</div>
						
						
						
						
						

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Zona.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoZonaN.idTipoMaestro}"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaZona}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Zona:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.nombreZona}" id="zonaN"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Vía.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoViaN.idTipoMaestro}" style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaVia}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Vía:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.nombreVia}" id="viaN"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.numero}" id="numDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>#Dpto:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.departamento}" id="depDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Interior:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.interior}" id="inDirN"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Manzana:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.manzana}" id="manDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Lote:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.lote}" id="lotDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Kilómetro:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.kilometro}" id="kilDirN"
									style="width:157px" />
							</div>
						</div>


						<div class="rowForm">
							<div class="label">
								<label>Referencia:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.referencia}"  id="refDirN"
									style="width:453px" />
							</div>
							<div class="label">
								<label>Tipo Vivienda.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoViviendaN.idTipoMaestro}"
									style="width:160px">
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipovivienda}" />
								</p:selectOneMenu>
							</div>
						</div>
					</p:panel>

					<p:panel header="Procesar" toggleable="true">
						<div class="rowFormProcess">
							<div class="buttonProcess">
								<p:commandButton actionListener="#{solicPersona.addSolicPersona}"
									value="Registrar" update=":form">
								</p:commandButton>
								<p:commandButton value="Imprimir" actionListener="#{solicPersona.toPDF}">
								</p:commandButton>
								<input type="submit" class="clear" value="submit"></input>
							</div>						
						</div>
					</p:panel>
				</div>
				
				
				</h:form>
		</div>
		<div id="footerPlataforma"></div>
	</div>
	
	
				<div id="popup_error" class="">
			        <div class="error" >
			            <span></span>
			        </div>
			    </div>
</h:body>

</html>